<template>
	<a-form :ref="'ruleForm'" :model="formState" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
		<a-collapse ghost>
			<a-collapse-panel key="1" header="标题设置" collapsible="header">
				<a-form-item key="titleShow" label="显示标题">
					<a-switch v-model:checked="formState.titleShow" />
				</a-form-item>
				<template v-if="formState.titleShow">
					<a-form-item key="title" label="标题内容" name="title">
						<a-input v-model:value="formState.title" />
					</a-form-item>
					<a-form-item key="titleSize" label="标题格式">
						<a-row :gutter="[10, 10]">
							<a-col :span="12">
								<a-select v-model:value="formState.titleSize" optionLabelProp="label">
									<a-select-option
										v-for="optionItem in [12, 14, 15, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]"
										:value="optionItem"
										:key="optionItem"
										:label="optionItem + 'px'"
									>
										{{ optionItem + 'px' }}
									</a-select-option>
								</a-select>
							</a-col>
							<a-col :span="12">
								<color-picker v-model:value="formState.titleColor" style="height: 100%" />
							</a-col>
							<a-col :span="8">
								<a-button
									style="width: 100%; font-weight: 600"
									:type="!formState.titleWeight ? 'default' : 'primary'"
									@click="formState.titleWeight = !formState.titleWeight"
									>B</a-button
								>
							</a-col>
							<a-col :span="8">
								<a-button
									style="width: 100%; font-style: italic"
									:type="!formState.titleStyle ? 'default' : 'primary'"
									@click="formState.titleStyle = !formState.titleStyle"
									>I</a-button
								>
							</a-col>
							<a-col :span="8">
								<a-button
									style="width: 100%; text-decoration: underline"
									:type="!formState.titleLine ? 'default' : 'primary'"
									@click="formState.titleLine = !formState.titleLine"
									>U</a-button
								>
							</a-col>
						</a-row>
					</a-form-item>
					<a-form-item key="titleIconShow" label="标题图标">
						<a-switch v-model:checked="formState.titleIconShow" />
					</a-form-item>
					<template v-if="formState.titleIconShow">
						<a-form-item key="titleIcon" label="图标">
							<a-dropdown class="h-[32px] flex items-center justify-between w-[100%]">
								<a class="h-[100%] ant-dropdown-link w-[100%] flex items-center justify-between" @click.prevent>
									<span :class="['iconfont', formState.titleIcon]"></span>
									<DownOutlined />
								</a>
								<template #overlay>
									<div class="flex w-[300px] bg-[#fff] flex-wrap shadow-lg rounded-[5px] max-h-[300px] overflow-y-auto">
										<div
											class="m-[15px] text-[20px]"
											v-for="item in iconList"
											:key="item"
											@click="formState.titleIcon = item"
										>
											<span :class="['iconfont', item]"></span>
										</div>
									</div>
								</template>
							</a-dropdown>
						</a-form-item>
						<a-form-item key="titleIconSize" label="图标大小">
							<a-row :gutter="[10, 10]">
								<a-col :span="12">
									<a-input-number v-model:value="formState.titleIconSize" style="width: 100%" />
								</a-col>
								<a-col :span="12">
									<color-picker v-model:value="formState.titleIconColor" style="height: 100%" />
								</a-col>
							</a-row>
						</a-form-item>
					</template>
					<a-form-item key="titleEndShow" label="标题右侧">
						<a-switch v-model:checked="formState.titleEndShow" />
					</a-form-item>
					<template v-if="formState.titleEndShow">
						<a-form-item key="titleEnd" label="右侧内容" name="titleEnd">
							<a-input v-model:value="formState.titleEnd" />
						</a-form-item>
						<a-form-item key="titleEndSize" label="右侧格式">
							<a-row :gutter="[10, 10]">
								<a-col :span="12">
									<a-select v-model:value="formState.titleEndSize" optionLabelProp="label">
										<a-select-option
											v-for="optionItem in [12, 14, 15, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]"
											:value="optionItem"
											:key="optionItem"
											:label="optionItem + 'px'"
										>
											{{ optionItem + 'px' }}
										</a-select-option>
									</a-select>
								</a-col>
								<a-col :span="12">
									<color-picker v-model:value="formState.titleEndColor" style="height: 100%" />
								</a-col>
								<a-col :span="8">
									<a-button
										style="width: 100%; font-weight: 600"
										:type="!formState.titleEndWeight ? 'default' : 'primary'"
										@click="formState.titleEndWeight = !formState.titleEndWeight"
										>B</a-button
									>
								</a-col>
								<a-col :span="8">
									<a-button
										style="width: 100%; font-style: italic"
										:type="!formState.titleEndStyle ? 'default' : 'primary'"
										@click="formState.titleEndStyle = !formState.titleEndStyle"
										>I</a-button
									>
								</a-col>
								<a-col :span="8">
									<a-button
										style="width: 100%; text-decoration: underline"
										:type="!formState.titleEndLine ? 'default' : 'primary'"
										@click="formState.titleEndLine = !formState.titleEndLine"
										>U</a-button
									>
								</a-col>
							</a-row>
						</a-form-item>
						<a-form-item key="titleEndIconShow" label="右侧图标">
							<a-switch v-model:checked="formState.titleEndIconShow" />
						</a-form-item>
						<template v-if="formState.titleEndIconShow">
							<a-form-item key="titleEndIcon" label="图标">
								<a-dropdown class="h-[32px] flex items-center justify-between w-[100%]">
									<a class="h-[100%] ant-dropdown-link w-[100%] flex items-center justify-between" @click.prevent>
										<span :class="['iconfont', formState.titleEndIcon]"></span>
										<DownOutlined />
									</a>
									<template #overlay>
										<div
											class="flex w-[300px] bg-[#fff] flex-wrap shadow-lg rounded-[5px] max-h-[300px] overflow-y-auto"
										>
											<div
												class="m-[15px] text-[20px]"
												v-for="item in iconList"
												:key="item"
												@click="formState.titleEndIcon = item"
											>
												<span :class="['iconfont', item]"></span>
											</div>
										</div>
									</template>
								</a-dropdown>
							</a-form-item>
							<a-form-item key="titleEndIconSize" label="图标大小">
								<a-row :gutter="[10, 10]">
									<a-col :span="12">
										<a-input-number v-model:value="formState.titleEndIconSize" style="width: 100%" />
									</a-col>
									<a-col :span="12">
										<color-picker v-model:value="formState.titleEndIconColor" style="height: 100%" />
									</a-col>
								</a-row>
							</a-form-item>
						</template>
					</template>
					<a-form-item key="align" label="对齐方式">
						<a-select v-model:value="formState.align">
							<a-select-option value="space-between">两端对齐</a-select-option>
							<a-select-option value="center">居中对齐</a-select-option>
						</a-select>
					</a-form-item>
				</template>
			</a-collapse-panel>

			<a-collapse-panel key="2" header="图表设置" collapsible="header">
				<a-form-item key="chartType" label="图表类型">
					<a-select v-model:value="formState.chartType">
						<a-select-option value="basic">基础柱状图</a-select-option>
						<a-select-option value="group">分组柱状图</a-select-option>
						<a-select-option value="stack">堆叠柱状图</a-select-option>
						<a-select-option value="percent">百分比堆叠图</a-select-option>
					</a-select>
				</a-form-item>

				<a-form-item key="chartColor" label="图表颜色">
					<a-row :gutter="[10, 10]">
						<a-col :span="8" v-for="(color, index) in formState.chartColor" :key="index">
							<color-picker v-model:value="formState.chartColor[index]" style="height: 100%" />
						</a-col>
					</a-row>
				</a-form-item>

				<a-form-item key="showLabel" label="显示标签">
					<a-switch v-model:checked="formState.showLabel" />
				</a-form-item>

				<a-form-item key="labelPosition" label="标签位置" v-if="formState.showLabel">
					<a-select v-model:value="formState.labelPosition">
						<a-select-option value="top">顶部</a-select-option>
						<a-select-option value="middle">中间</a-select-option>
						<a-select-option value="bottom">底部</a-select-option>
					</a-select>
				</a-form-item>

				<a-form-item key="showLegend" label="显示图例">
					<a-switch v-model:checked="formState.showLegend" />
				</a-form-item>

				<a-form-item key="legendPosition" label="图例位置" v-if="formState.showLegend">
					<a-select v-model:value="formState.legendPosition">
						<a-select-option value="top-left">左上</a-select-option>
						<a-select-option value="top-center">中上</a-select-option>
						<a-select-option value="top-right">右上</a-select-option>
						<a-select-option value="bottom-left">左下</a-select-option>
						<a-select-option value="bottom-center">中下</a-select-option>
						<a-select-option value="bottom-right">右下</a-select-option>
					</a-select>
				</a-form-item>
			</a-collapse-panel>

			<a-collapse-panel key="3" header="整体外观" collapsible="header">
				<a-form-item key="bg" label="背景" name="bg">
					<a-row :gutter="[10, 10]">
						<a-col :span="24">
							<color-picker v-model:value="formState.bgColor" style="height: 100%" />
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item key="border" label="边框">
					<a-row :gutter="[10, 10]">
						<a-col :span="8">
							<a-select v-model:value="formState.borderStyle">
								<a-select-option value="solid">实线</a-select-option>
								<a-select-option value="dashed">虚线</a-select-option>
								<a-select-option value="dotted">点线</a-select-option>
								<a-select-option value="none">无</a-select-option>
							</a-select>
						</a-col>
						<a-col :span="8">
							<color-picker v-model:value="formState.borderColor" style="height: 100%" />
						</a-col>
						<a-col :span="8">
							<a-input-number v-model:value="formState.borderWidth" style="width: 100%" />
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item key="bgR" label="圆角">
					<a-row :gutter="[10, 10]">
						<a-col :span="4">
							<a-button
								style="width: 100%"
								:type="!formState.bgRLock ? 'default' : 'primary'"
								@click="formState.bgRLock = !formState.bgRLock"
							>
								<template #icon>
									<LockOutlined v-if="formState.bgRLock" />
									<UnlockOutlined v-else />
								</template>
							</a-button>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="bgRChange" v-model:value="formState.bgRTL" style="width: 100%">
								<template #prefix>
									<RadiusUpleftOutlined />
								</template>
							</a-input-number>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="bgRChange" v-model:value="formState.bgRTR" style="width: 100%">
								<template #prefix>
									<RadiusUprightOutlined />
								</template>
							</a-input-number>
						</a-col>
						<a-col :span="4" :style="{ visibility: 'hidden' }">
							<a-button
								style="width: 100%"
								:type="!formState.bgRLock ? 'default' : 'primary'"
								@click="formState.bgRLock = !formState.bgRLock"
							>
								<template #icon>
									<LockOutlined v-if="formState.bgRLock" />
									<UnlockOutlined v-else />
								</template>
							</a-button>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="bgRChange" v-model:value="formState.bgRBL" style="width: 100%">
								<template #prefix>
									<RadiusBottomleftOutlined />
								</template>
							</a-input-number>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="bgRChange" v-model:value="formState.bgRBR" style="width: 100%">
								<template #prefix>
									<RadiusBottomrightOutlined />
								</template>
							</a-input-number>
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item label="内边距">
					<a-row :gutter="[10, 10]">
						<a-col :span="4">
							<a-button
								style="width: 100%"
								:type="!formState.paddingLock ? 'default' : 'primary'"
								@click="formState.paddingLock = !formState.paddingLock"
							>
								<template #icon>
									<LockOutlined v-if="formState.paddingLock" />
									<UnlockOutlined v-else />
								</template>
							</a-button>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="paddingChange" v-model:value="formState.paddingT" style="width: 100%">
								<template #prefix> 上 </template>
							</a-input-number>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="paddingChange" v-model:value="formState.paddingR" style="width: 100%">
								<template #prefix> 右 </template>
							</a-input-number>
						</a-col>
						<a-col :span="4" :style="{ visibility: 'hidden' }">
							<a-button
								style="width: 100%"
								:type="!formState.paddingLock ? 'default' : 'primary'"
								@click="formState.paddingLock = !formState.paddingLock"
							>
								<template #icon>
									<LockOutlined v-if="formState.paddingLock" />
									<UnlockOutlined v-else />
								</template>
							</a-button>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="paddingChange" v-model:value="formState.paddingB" style="width: 100%">
								<template #prefix> 下 </template>
							</a-input-number>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="paddingChange" v-model:value="formState.paddingL" style="width: 100%">
								<template #prefix> 左 </template>
							</a-input-number>
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item label="阴影">
					<a-row :gutter="[10, 10]">
						<a-col :span="8">
							<a-input-number v-model:value="formState.shadowX" style="width: 100%">
								<template #prefix> X </template>
							</a-input-number>
						</a-col>
						<a-col :span="8">
							<a-input-number v-model:value="formState.shadowY" style="width: 100%">
								<template #prefix> Y </template>
							</a-input-number>
						</a-col>
						<a-col :span="8">
							<color-picker v-model:value="formState.shadowColor" style="height: 100%" />
						</a-col>
						<a-col :span="12">
							<a-input-number v-model:value="formState.shadowDegree" style="width: 100%">
								<template #prefix> 模糊 </template>
							</a-input-number>
						</a-col>
					</a-row>
				</a-form-item>
			</a-collapse-panel>
		</a-collapse>
	</a-form>
</template>

<script setup>
	import config from '../config'
	import { reactive, defineProps, defineEmits, h } from 'vue'
	import {
		DisconnectOutlined,
		DownOutlined,
		RadiusUpleftOutlined,
		RadiusUprightOutlined,
		RadiusBottomleftOutlined,
		RadiusBottomrightOutlined
	} from '@ant-design/icons-vue'

	import iconFont from '../../../public/iconFont'
	const iconList = ref(iconFont)

	const emits = defineEmits(['upDataConfig'])

	const props = defineProps({
		config: {
			type: Object,
			default: () => {
				return { ...config.style }
			}
		}
	})

	const formState = reactive({
		...props.config.style
	})

	// 更新组件内容
	watch(
		() => formState,
		(newVal) => {
			emits('upDataConfig', { ...props.config, style: newVal })
		},
		{
			deep: true
		}
	)

	const bgRChange = (e) => {
		if (formState.bgRLock) {
			formState.bgRTL = e
			formState.bgRTR = e
			formState.bgRBL = e
			formState.bgRBR = e
		}
	}

	const paddingChange = (e) => {
		if (formState.paddingLock) {
			formState.paddingT = e
			formState.paddingR = e
			formState.paddingB = e
			formState.paddingL = e
		}
	}
</script>

<style lang="less" scoped>
	:deep(.vc-color-wrap) {
		height: 100%;
		line-height: 32px !important;
	}
	:deep(.ant-collapse-header) {
		display: flex;
		align-items: center !important;
	}
	:deep(.ant-dropdown-link) {
		border: 1px solid #d9d9d9;
		padding: 0px 5px;
	}
	:deep(.ant-radio-group) {
		display: flex;
		text-align: center;
	}
</style>
